import Vue from 'vue'
import VueRouter from "vue-router";
import Home from "@/views/Home"
import Index from "@/views/Index";
import axios from "@/axios";
import store from "@/store";

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    children: [
      {
        path: '/index',
        name: 'Index',
        component: () => import('@/views/Index')
      },
      {
        path: '/userCenter',
        name: 'UserCenter',
        component: () => import('@/views/UserCenter')
      }
      // {
      //   path: '/sys/users',
      //   name: 'SysUser',
      //   component: () => import('@/views/sys/User')
      // },
      // {
      //   path: '/sys/roles',
      //   name: 'SysRole',
      //   component: () => import('@/views/sys/Role')
      // },
      // {
      //   path: '/sys/menus',
      //   name: 'SysMenu',
      //   component: () => import('@/views/sys/Menu')
      // },
    ]
  },
  {
    path: '/login',
    name: 'Login',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '@/views/Login')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

router.beforeEach((to,from,next) => {

  //判断是否有token
  let token = localStorage.getItem("token")
  //是否有导航
  let hasRoute = store.state.menus.hasRoute

  if (to.path === '/login') {
    next()
  }else if (!token) {
    next({path: '/login'})
  }else if (token && !hasRoute){
    //请求路由
    axios.get("/sys/menu/nav",{
      headers: {
        Authorization: localStorage.getItem("token")
      }
    }).then(res => {
      console.log(res.data.data)
      //拿到menuList
      store.commit("setMenuList",res.data.data.nav)
      //拿到用户权限
      store.commit("setPermList",res.data.data.authoritys)

      // console.log(store.state.menus.menuList)
      //动态绑定路由
      let newRoutes = router.options.routes

      res.data.data.nav.forEach(menu => {
        if (menu.children){
          menu.children.forEach(e => {
            //转换成路由
            let route = menuToRoute(e)
            //把路由添加到路由管理中
            if (route){
              newRoutes[0].children.push(route)
            }
          })
        }
      })
      // console.log("newRoutes")
      // console.log(newRoutes);
      //将路由添加
      router.addRoutes(newRoutes)

      hasRoute = true
      store.commit("changeRouteStatus",hasRoute)
    })
  }

  next()
})
//导航转成路由
const menuToRoute = (menu) => {
  if (!menu.component) {
    return null
  }
  let route = {
    name: menu.name,
    path: menu.path,
    meta: {
      icon: menu.icon,
      title: menu.title
    }
  }
  route.component = () => import('@/views/'+ menu.component +'.vue')
  return route
}

export default router
